<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>热词</title>
  <script src="../../components/echarts-4.0.4.min.js"></script>
  <style>
    body,
    html {
      padding: 0;
      margin: 0;
      background: #0A0F23;
      width: 100%;
      height: 100%;
    }

  </style>
</head>

<body>
  <div style="width: 100%;height: 100%;" id="turnover"></div>
</body>
<script>
  var turnover = echarts.init(document.getElementById('turnover'));
  var titleData = "2017年全国技术合同成交排名 TOP10";

  var dataMap = {};

  dataMap.dataVisit = {
    //次数
    2011: [4485.33, 1066, 949.48, 921.55,872.92,867.53,658.48,541.61,419.68,409.1],
    2012: [81266,24742,17423,31355,37348,21559,12512,25947,12853,15219],
    //到访人数
   /* 1: [31.4, -1.8, 33.2, -7.1, 42.1],
    2: [55.4, -7.9, -29.0, 30.3, 106.6],*/
  };

  var barOption = {
    baseOption: {
      timeline: {
        show: false,
        axisType: 'category',
        loop: true,
        autoPlay: true,
        //playInterval: 1000,
        label: {
          normal: {
            textStyle: {
              color: '#fff'
            }
          },
          position: 14
        },
        lineStyle: {
          color: '#fff'
        },
        controlStyle: {
          show: false
        },
        top: 0,
        data: [
          '北京', '湖北', '广东', '陕西', '江苏', '上海','天津','山东','四川','辽宁'
        ]
      },
      legend: {
        left: '5%',
        top: '10%',
        data: ['合同额(亿元)',  '合同数(项)'],
        textStyle: {
          color: '#fff',
          fontSize: 16
        },
        itemWidth: 15,
        itemHeight: 10
      },
      tooltip: {
        trigger: 'none',
        axisPointer: {
          type: 'shadow',
        }
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '8%',
        top: '27%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        axisLine: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisTick: {
          lineStyle: {
            color: '#fff'
          }
        },
        axisLabel: {
          interval: 0,
          rotate: -55,
          textStyle: {
              color: "#fff",
              fontSize: 16
          }
        },
        splitLine: {
          show: false
        },
        
        data: [
           '北京', '湖北', '广东', '陕西', '江苏', '上海','天津','山东','四川','辽宁'
        ]
      }],
      yAxis: [{
          type: 'value',
           name:'合同额（亿元）',
          nameTextStyle: {
            color: "#FFF",
            verticalAlign: 'bottom',
            fontSize: 16
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisTick: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 16
            }
          },
          splitLine: {
            show: false
          }
        },
        {
          type: 'value',
          name:'合同数（项）',
          yAxisIndex: 1,
          nameTextStyle: {
            color: "#FFF",
            verticalAlign: 'bottom',
            fontSize: 16
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontSize: 16
            }
          },
          splitLine: {
            show: false
          }
        }

      ],
      series: [{
          name: '合同额(亿元)',
          type: 'bar',
          barWidth: 10,
          barGap: 0,
          data: dataMap.dataVisit['2011'],
          itemStyle: {
            normal: {
              color: '#0c8bd1',
              fontSize: 22
            }
          }
       },
        {
          name: '合同数(项)',
          barGap: 0,
          type: 'bar',
          barWidth: 10,
          yAxisIndex: 1,
          data: dataMap.dataVisit['2012'],
          itemStyle: {
            normal: {
              color: '#0de2ff',
              fontSize: 22
            }
          }
        }
      ]
    },
    options: [{
      title: {
        text: titleData,
        left: 'center',
        top: "0%",
        textStyle: {
          color: '#fff',
          fontSize: 22
        }
      }
    }]
  };

  turnover.setOption(barOption);

</script>

</html>
